<template>
  <main class="content">
    <header><van-icon name="arrow-left" @click="back" /> <span><i class="help-icon"></i> 帮助中心</span></header>
    <div class="body-content">
      <div class="query-list">
        <div class="query-list-title">智能助手辅助你办案更轻松</div>
        <div v-for="item in list" :key="item.label" class="list-info" @click="getHelpInfo(item)">{{ item.label }} <van-icon name="arrow" /></div>
      </div>
      <div v-if="data.length" class="query-time"><span>今天{{ time }}</span></div>
      <template v-for="item in data" :key="item.id">
        <div class="statement"  :id="'title' + item.id">
          <span>
            {{ item.label }}
          </span>
        </div>
        <WiCard class="mb-40">
          <div class="query-list">
            <div class="query-list-title">{{ item.content.title }}</div>
            <div class="list-info">
              <span class="info-label">助手说明:</span>
              <p>{{ item.content.zssm }}</p>
            </div>
            <div class="list-info">
              <span class="info-label">操作步骤:</span>
              <p>{{ item.content.czbz }}</p>
            </div>
            <div v-if="item.content.yyyq" class="list-info">
              <span class="info-label">语音要求:</span>
              <p>{{ item.content.yyyq }}</p>
            </div>
          </div>
        </WiCard>
      </template>
    </div>
  </main>
</template>
<script setup>
import { useRouter } from "vue-router"
import {nextTick, ref, reactive} from "vue"
import * as dayjs from 'dayjs'
const router = useRouter()
const back = () => {
  router.go(-1)
}

const time = ref(dayjs().format('HH:mm'))
const list = reactive([
  {
    label: '违法行为识别智能辅助',
    key: 'wfxw',
    content: {
      title: '违法行为识别智能辅助',
      zssm: '基于案件处罚知识图谱，为工作人员提供违法行为识别应用，依据调查取证后的违法事实，智能识别案件领域、违法行为分类违法依据。',
      czbz: '首页-违法行为识别入口进入，语音/文字输入线索内容后，一步智能识别违法行为',
      yyyq: '需要录入标准普通话，其他语言或者方吉可能会影响识别准确度，最多60s'
    }
  },
  {
    label: '行政处罚建议智能助手',
    key: 'xzcf',
    content: {
      title: '行政处罚建议智能辅助',
      zssm: '基于案件处罚知识图谱，为工作人员提供行政处罚建议智能辅助应用，依据调查取证后的违法事实，系统智能推荐处罚依据，自由材料依据及判定。',
      czbz: '首页-行政处罚建议入口进入，语音/文字输入违法事实后，一步提供智能处罚分析。',
      yyyq: '需要录入标准普通话，其他语言或者方言可能会影响识别准确度，最多60s'
    }
  },
  {
    label: '快速查询法律法规',
    key: 'flfg',
    content: {
      title: '法律法规查询',
      zssm: '基于法律法规知识图谱，为工作人员提供办案过程中移动便捷获法律知识，依据工作人员查询内容，系统智能推荐相关信息。',
      czbz: '首页-搜索框点击进入，文字输入关键词后，一步智能推荐相关信息。'
    }
  },
])
const data = reactive([])

const getHelpInfo = async(item) => {
  const id = 'title'+data.length
  data.push({id: data.length , ...item})
  await nextTick()
  const element = document.getElementById(id);
  window.scrollTo(0, element.offsetTop)
}

</script>
<style lang="scss" scoped>
.content {
  min-height: 100vh;
  padding: 0 20px 40px;
  background-color: #f9f9f9;


  header {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    height: 60px;

    .help-icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      background: url('../assets/imgs/help_icon.png') no-repeat;
      background-size: 100% 100%;
    }

    span {
      display: flex;
      align-items: center;
      margin: auto;
    }
  }

  .body-content {
    position: relative;
    margin-top: 5px;

    .query-list {
      padding: 10px 5px 30px 10px;

      .query-list-title {
        font-size: 16px;
        font-weight: 600;
        padding-left: 10px;
        border-left: 4px solid #5384d2;
      }

      .list-info {
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;

        .info-label {
          display: inline-block;
          min-width: 80px;
          color: #000;
          font-weight: 600;
        }

        p {
          margin: 0;
        }
      }
    }

    .query-time {
      margin: 20px 0;
      text-align: center;

      span {
        padding: 2px 10px;
        border-radius: 12px;
        background-color: rgb(206, 206, 206);
        color: #fff;

      }
    }

    .statement {
      margin-bottom: 30px;
      text-align: right;

      span {
        display: inline-block;
        border-radius: 10px;
        background-color: rgb(205, 222, 245);
        padding: 15px 20px;
      }
    }
  }
}
</style>
